<template>
  <div class="pagestyle">
    <list_controller
      ref="zujianname"
      :options="state.options"
      :tableHeightChange="true"
      @query="queryFn"
    >
      <template v-slot:opraCurdBtnlist="row">
        <span>
          <el-button
            class="tableFontSize"
            type="primary"
            link
            size="small"
            @click="detailBtn(row.row.row)"
            >详细数据</el-button
          >
        </span>
      </template>
      <template v-slot:selectNamelist> 管网总览 </template>
      <template v-slot:tableHeightChange>
        <div class="tabsChange">
          <div
            @click="tabsAllFn"
            class="allSelect"
            :class="{ activeColor: state.activeIndex == 0 }"
          >
            全部
          </div>
          <div class="tabs-container">
            <div
              @click="tabsClickFn(item, index)"
              class="monitor-container"
              :class="{ activeColor: state.activeIndex == index + 1 }"
              v-for="(item, index) in state.tabsData"
              :key="index"
            >
              <div class="table-header">
                <span class="pipe-name">{{ item.name }}</span>
                <span>
                  <span class="accumulated-label">累计抽采量</span>
                  <span class="accumulated-value" style="margin-left: 20px"
                    >{{ item.drainageAccumulatedAmount }}m³</span
                  >
                </span>
              </div>
              <div class="centerTable">
                <div
                  class="data-row"
                  v-for="(row, rowIndex) in formatPointList(item.pointList)"
                  :key="rowIndex"
                >
                  <div
                    class="data-item fbc"
                    v-for="(dataItem, dataIndex) in row"
                    :key="dataIndex"
                  >
                    <span class="data-label" :title="dataItem.name">{{
                      substr(dataItem.name)
                    }}</span>
                    <span class="data-value">
                      {{ dataItem.value !== null ? dataItem.value : "--"
                      }}{{ dataItem.unit }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </list_controller>
    <!-- 管路详情弹框 -->
    <teleport to="body">
      <vxe-modal
        esc-closable
        destroy-on-close
        :lock-view="false"
        :width="1200"
        :height="auto"
        v-model="state.detailModal"
        resize
        :mask="true"
        showFooter
      >
        <template #title>
          <div class="w100 h100 fsc mask_title">管路详情</div>
        </template>
        <template #default>
          <div class="form_box">
            <div class="zctp fbc">
              <div class="zcptall">
                <div>
                  <div class="t1">管路名称</div>
                  <div class="t2">
                    {{ state.guanluObj.pipeline.pipeName }}
                  </div>
                </div>
                <div>
                  <div class="t1">管路类型</div>
                  <div class="t2">
                    {{ state.guanluObj.pipeline.pipeTypeName }}
                  </div>
                </div>
                <div>
                  <div class="t1">所属管网</div>
                  <div class="t2">{{ state.guanluObj.pipelineDir }}</div>
                </div>
                <div>
                  <div class="t1">途径巷道</div>
                  <div class="t2">
                    {{ state.guanluObj.laneLocation }}
                  </div>
                </div>
              </div>
            </div>
            <div class="zcbt" style="margin-top: 10px">
              <div class="searchs">
                <el-form :model="state.guanluSearchData" class="forms">
                  <el-row :gutter="20">
                    <el-col :span="5">
                      <el-form-item label="监测点名称">
                        <el-select
                          v-model="state.guanluSearchData.pointCode"
                          style="width: 100%"
                          size="small"
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="(item, index) in state.pointSelectData"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="时间">
                        <el-date-picker
                          v-model="state.guanluSearchData.time"
                          type="datetimerange"
                          range-separator="-"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          size="small"
                          :value-format="'YYYY-MM-DD HH:mm:ss'"
                          :default-time="[
                            new Date(2000, 1, 1, 0, 0, 0),
                            new Date(2000, 1, 1, 23, 59, 59),
                          ]"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="3">
                      <el-form-item label=" ">
                        <el-button
                          @click="guanluqueryFn"
                          size="small"
                          type="primary"
                          >查询</el-button
                        >
                        <el-button @click="guanluresetFn" size="small"
                          >重置</el-button
                        >
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <div class="search-btm">
                  <div class="zcptall">
                    <div>
                      <div class="t1">累计抽采量</div>
                      <div class="t2">
                        {{ state.guanluObj.drainageAccumulatedAmount }}
                      </div>
                    </div>
                    <div>
                      <div class="t1">CH4</div>
                      <div class="t2">{{ state.guanluObj.ch4Value }}</div>
                    </div>
                    <div>
                      <div class="t1">压力</div>
                      <div class="t2">{{ state.guanluObj.pressure }}</div>
                    </div>
                    <div>
                      <div class="t1">温度</div>
                      <div class="t2">
                        {{ state.guanluObj.temperature }}
                      </div>
                    </div>
                    <div>
                      <div class="t1">CO</div>
                      <div class="t2">
                        {{ state.guanluObj.coValue }}
                      </div>
                    </div>
                    <div>
                      <div class="t1">流量</div>
                      <div class="t2">
                        {{ state.guanluObj.flowAmount }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="liebiao">
                <div class="liebiaoBottom">
                  <vxe-table
                    height="340"
                    :data="state.guanluTableData"
                    border="inner"
                  >
                    <vxe-column type="checkbox" :width="55"></vxe-column>
                    <vxe-column
                      type="seq"
                      :width="55"
                      title="序号"
                    ></vxe-column>
                    <vxe-column
                      v-for="(item, index) in state.guanluTableheads"
                      :field="item.field"
                      :title="item.title"
                      :params="{ name: item.name }"
                      :width="item.width ? item.width : ''"
                      :key="index"
                    >
                    </vxe-column>
                    <vxe-column title="操作">
                      <template #default="{ row }">
                        <el-button type="primary" link size="small"
                          >曲线</el-button
                        >
                        <el-button
                          @click="mciaiDetailBtn"
                          type="primary"
                          link
                          size="small"
                          >详细数据</el-button
                        >
                      </template>
                    </vxe-column>
                  </vxe-table>
                  <div
                    v-if="state.guanlupageconfig.total > 0"
                    class="w100 pagevxe"
                    style="height: 35px"
                  >
                    <el-pagination
                      class="globalFontSize"
                      :class="{ pages: settingsStore.isDark }"
                      v-model:current-page="state.guanlupageconfig.currentPage"
                      v-model:page-size="state.guanlupageconfig.pageSize"
                      :page-sizes="[10, 20, 30, 40]"
                      background
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="state.guanlupageconfig.total"
                      @size-change="guanluSizePage"
                      @current-change="guanluCurrentPage"
                      style="position: absolute; bottom: 16px; right: 16px"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template #footer>
          <el-button @click="cancelGuanluModal">取消</el-button>
          <el-button type="primary" @click="submitGuanluForm"> 确定 </el-button>
        </template>
      </vxe-modal>
    </teleport>
    <!-- 密采详情弹框 -->
    <teleport to="body">
      <vxe-modal
        esc-closable
        destroy-on-close
        :lock-view="false"
        :width="1200"
        :height="auto"
        v-model="state.micaiDetailModal"
        resize
        :mask="true"
        showFooter
      >
        <template #title>
          <div class="w100 h100 fsc mask_title">管路详情</div>
        </template>
        <template #default>
          <div class="form_box">
            <div class="zctp fbc">
              <div class="zcptall">
                <div>
                  <div class="t1">管路名称</div>
                  <div class="t2">
                    {{ state.micaiObj.pipeline.pipeName }}
                  </div>
                </div>
                <div>
                  <div class="t1">管路类型</div>
                  <div class="t2">
                    {{ state.micaiObj.pipeline.pipeTypeName }}
                  </div>
                </div>
                <div>
                  <div class="t1">所属管网</div>
                  <div class="t2">{{ state.micaiObj.pipelineDir }}</div>
                </div>
                <div>
                  <div class="t1">途径巷道</div>
                  <div class="t2">
                    {{ state.micaiObj.laneLocation }}
                  </div>
                </div>
              </div>
            </div>
            <div class="zcbt" style="margin-top: 10px">
              <div class="searchs">
                <el-form :model="state.micaiSearchData" class="forms">
                  <el-row :gutter="20">
                    <el-col :span="5">
                      <el-form-item label="监测点名称">
                        <el-select
                          v-model="state.micaiSearchData.pointCode"
                          style="width: 100%"
                          size="small"
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="(item, index) in state.pointSelectData"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="时间">
                        <el-date-picker
                          v-model="state.micaiSearchData.time"
                          type="datetimerange"
                          range-separator="-"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          size="small"
                          :value-format="'YYYY-MM-DD HH:mm:ss'"
                          :default-time="[
                            new Date(2000, 1, 1, 0, 0, 0),
                            new Date(2000, 1, 1, 23, 59, 59),
                          ]"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="3">
                      <el-form-item label=" ">
                        <el-button
                          @click="micaiqueryFn"
                          size="small"
                          type="primary"
                          >查询</el-button
                        >
                        <el-button @click="micairesetFn" size="small"
                          >重置</el-button
                        >
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <div class="search-btm">
                  <div class="zcptall">
                    <div>
                      <div class="t1">累计抽采量</div>
                      <div class="t2">
                        {{ state.micaiObj.drainageAccumulatedAmount }}
                      </div>
                    </div>
                    <div>
                      <div class="t1">CH4</div>
                      <div class="t2">{{ state.micaiObj.ch4Value }}</div>
                    </div>
                    <div>
                      <div class="t1">压力</div>
                      <div class="t2">{{ state.micaiObj.pressure }}</div>
                    </div>
                    <div>
                      <div class="t1">温度</div>
                      <div class="t2">
                        {{ state.micaiObj.temperature }}
                      </div>
                    </div>
                    <div>
                      <div class="t1">CO</div>
                      <div class="t2">
                        {{ state.micaiObj.coValue }}
                      </div>
                    </div>
                    <div>
                      <div class="t1">流量</div>
                      <div class="t2">
                        {{ state.micaiObj.flowAmount }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="liebiao">
                <div class="liebiaoBottom">
                  <vxe-table
                    height="340"
                    :data="state.micaiTableData"
                    border="inner"
                  >
                    <vxe-column type="checkbox" :width="55"></vxe-column>
                    <vxe-column
                      type="seq"
                      :width="55"
                      title="序号"
                    ></vxe-column>
                    <vxe-column
                      v-for="(item, index) in state.micaiTableheads"
                      :field="item.field"
                      :title="item.title"
                      :params="{ name: item.name }"
                      :width="item.width ? item.width : ''"
                      :key="index"
                    >
                    </vxe-column>
                  </vxe-table>
                  <div
                    v-if="state.micaiPageconfig.total > 0"
                    class="w100 pagevxe"
                    style="height: 35px"
                  >
                    <el-pagination
                      class="globalFontSize"
                      :class="{ pages: settingsStore.isDark }"
                      v-model:current-page="state.micaiPageconfig.currentPage"
                      v-model:page-size="state.micaiPageconfig.pageSize"
                      :page-sizes="[10, 20, 30, 40]"
                      background
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="state.micaiPageconfig.total"
                      @size-change="micaiSizePage"
                      @current-change="micaiCurrentPage"
                      style="position: absolute; bottom: 16px; right: 16px"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template #footer>
          <el-button @click="cancelMicaiModal">取消</el-button>
          <el-button type="primary" @click="submitMicaiForm"> 确定 </el-button>
        </template>
      </vxe-modal>
    </teleport>
  </div>
</template>
<script setup>
import list_controller from "@/components/commonCom/list_controllerChoucai";
import { computed, onMounted, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { table_headers } from "@/components/commonCom/table_headersChoucai";
import axios from "@/utils/request";
import usePagesStore from "@/store/modules/pages";
import { getsubstationmodel, fileupload } from "@/api/config";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
const { proxy } = getCurrentInstance();
const store = usePagesStore();
const router = useRouter();
let previewHttps = import.meta.env.VITE_APP_HTTP;
components: {
  list_controller;
}
const upload = ref(null);
let state = reactive({
  activeIndex: 0,
  tabsId: "",
  tabsData: [],
  detailModal: false,
  guanluSearchData: {},
  guanluTableData: [],
  guanluObj: {},
  guanluTableheads: computed(
    () => table_headers.DrainagePipelineMonitorStatistics
  ),
  guanlupageconfig: {
    currentPage: 1,
    pageSize: 10,
    total: 0,
  },
  pointSelectData: [],
  micaiDetailModal: false,
  micaiSearchData: {},
  micaiTableData: [],
  micaiObj: {},
  micaiTableheads: computed(() => table_headers.DrainagePipelineMonitorDetail),
  micaiPageconfig: {
    currentPage: 1,
    pageSize: 10,
    total: 0,
  },
  options: {
    tableheads: computed(() => table_headers.DrainagePipelineNetworkPreview),
    queryList: {
      dropdownUrl: "",
      querys: [
        {
          field: "name",
          title: "管网名称",
          type: "input",
          binddata: "",
        },
        {
          field: "typeId",
          title: "管路类型",
          type: "select",
          binddata: "",
          options: [],
        },
        {
          field: "parentId",
          title: "所属管网",
          type: "select",
          binddata: "",
          options: [],
        },
      ],
      queryMap: new Map([
        // ['sensorTypeId', 'safety_pointType'],
        // ['deviceTypeId', 'safety_deviceType'],
        // ['alarmTypeId', 'alarmType']
      ]),
    },
    dataUrl: "/drainage/pipeline-network/page",
    delUrl: "/substation/type/deleteStation",
    addUrl: "/substation/type/addStation",
    descUrl: "/substation/type/searchStation/",
    editUrl: "/substation/type/editStation",
  },
});
const queryFn = (params) => {
  if (params == 1 || params == 2) {
    proxy.$refs.zujianname.getData({ rootId: state.tabsId });
  }
};
const substr = (str) => {
  if (str.length > 4) {
    return str.substring(0, 4) + "...";
  } else {
    return str;
  }
};
// 将pointList转换为每行3个数据项的格式
const formatPointList = (pointList) => {
  const rows = [];
  for (let i = 0; i < pointList.length; i += 3) {
    const row = pointList.slice(i, i + 3);
    // 如果一行不足3个，用空数据填充
    while (row.length < 3) {
      row.push({ name: "--", value: null, unit: "" });
    }
    rows.push(row);
  }
  return rows;
};
const tabsAllFn = () => {
  state.activeIndex = 0;
  state.tabsId = "";
  proxy.$refs.zujianname.getData({ rootId: "" });
};
const tabsClickFn = (item, index) => {
  state.activeIndex = index + 1;
  console.log(item, "item");
  state.tabsId = item.id;
  proxy.$refs.zujianname.getData({ rootId: item.id });
};
// 详细数据
const detailBtn = (row) => {
  state.guanluObj = row;
  state.detailModal = true;
  //监测点
  axios.post("/uni/sensor-point/list", {}).then((res) => {
    state.pointSelectData = res.data.map((item) => {
      return {
        label: item.name,
        value: item.pointCode,
      };
    });
  });
  getTongjiList();
};
function getTongjiList() {
  axios
    .post("/drainage/pipeline/monitor/list", {
      pageNum: state.guanlupageconfig.currentPage,
      pageSize: state.guanlupageconfig.pageSize,
      pointCode: state.guanluSearchData.pointCode
        ? state.guanluSearchData.pointCode
        : null,
      queryStartTime: state.guanluSearchData.time
        ? state.guanluSearchData.time[0]
        : null,
      queryEndTime: state.guanluSearchData.time
        ? state.guanluSearchData.time[1]
        : null,
    })
    .then((res) => {
      state.guanluTableData = res.data.list;
      state.guanlupageconfig.total = res.data.total;
    });
}
const cancelGuanluModal = () => {
  state.detailModal = false;
};
const submitGuanluForm = () => {
  state.detailModal = false;
};
//管路详情搜索
const guanluqueryFn = () => {
  getTongjiList();
};
const guanluresetFn = () => {
  state.guanluSearchData = {};
  getTongjiList();
};
//管路详情分页
const guanluSizePage = (size) => {
  state.guanlupageconfig.pageSize = size;
  getTongjiList();
};
const guanluCurrentPage = (currentPage) => {
  state.guanlupageconfig.currentPage = currentPage;
  getTongjiList();
};
//密采详情
const mciaiDetailBtn = (row) => {
  state.micaiObj = row;
  state.micaiDetailModal = true;
  //监测点
  axios.post("/uni/sensor-point/list", {}).then((res) => {
    state.pointSelectData = res.data.map((item) => {
      return {
        label: item.name,
        value: item.pointCode,
      };
    });
  });
  getMicaiList();
};
function getMicaiList() {
  axios
    .post("/drainage/pipeline/monitor/detail/page", {
      pageNum: state.micaiPageconfig.currentPage,
      pageSize: state.micaiPageconfig.pageSize,
      pointCode: state.micaiSearchData.pointCode
        ? state.micaiSearchData.pointCode
        : null,
      queryStartTime: state.micaiSearchData.time
        ? state.micaiSearchData.time[0]
        : null,
      queryEndTime: state.micaiSearchData.time
        ? state.micaiSearchData.time[1]
        : null,
    })
    .then((res) => {
      state.micaiTableData = res.data.list;
      state.micaiPageconfig.total = res.data.total;
    });
}
const cancelMicaiModal = () => {
  state.micaiDetailModal = false;
};
const submitMicaiForm = () => {
  state.micaiDetailModal = false;
};
//密采详情搜索
const micaiqueryFn = () => {
  getMicaiList();
};
const micairesetFn = () => {
  state.micaiSearchData = {};
  getMicaiList();
};
//密采详情分页
const micaiSizePage = (size) => {
  state.micaiPageconfig.pageSize = size;
  getMicaiList();
};
const micaiCurrentPage = (currentPage) => {
  state.micaiPageconfig.currentPage = currentPage;
  getMicaiList();
};
function getSelectData() {
  axios
    .post("/gas-drainage/system/dict/data/type-batch", ["drill_pipeline_type"])
    .then((res) => {
      state.options.queryList.querys[1].options =
        res.data.drill_pipeline_type.map((item) => {
          return {
            label: item.dictLabel,
            value: Number(item.dictValue),
          };
        });
    });
  // 所属管网
  axios.post("/drainage/pipeline-network/list", {}).then((res) => {
    state.options.queryList.querys[2].options = res.data.map((item) => {
      return {
        label: item.name,
        value: item.id,
      };
    });
  });
  axios
    .post("/drainage/pipeline-network/main-pipeline/list", {})
    .then((res) => {
      state.tabsData = res.data;
    });
}
onMounted(() => {
  getSelectData();
});
</script>
<style lang="scss" scoped>
.tabsChange {
  height: 150px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  .allSelect {
    cursor: pointer;
    width: 80px;
    height: 125px;
    font-size: 16px;
    text-align: center;
    font-weight: 700;
    line-height: 125px;
    border-radius: 4px;
    background: rgba(229, 233, 239, 1);
    border: 1.02px solid rgba(163, 163, 164, 1);
  }
  .activeColor {
    background: rgba(225, 235, 250, 1);
    border: 1px solid rgba(42, 130, 228, 1);
    color: rgba(42, 130, 228, 1);
    // box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
  }
}
</style>
<!-- 表格头部tabs切换效果 -->
    <style>
.tabs-container {
  display: flex;
  align-items: center;
  /* flex-wrap: wrap; */
  gap: 10px;
  /* justify-content: center; */
  width: 100%;
  overflow-x: auto;
}

.monitor-container {
  cursor: pointer;
  width: 100%;
  height: 125px;
  min-width: 400px;
  border-radius: 4px;
  border: 1px solid rgba(163, 163, 164, 1);
  transition: all 0.3s ease;
  cursor: pointer;
}
.monitor-container.activeColor {
  background: rgba(59, 130, 246, 0.15);
  border-color: #3b82f6;
  /* box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); */
}

.table-header {
  padding: 5px 5px;
  border-bottom: 1px solid rgba(163, 163, 164, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.pipe-name {
  font-size: 16px;
}

.accumulated-label {
  color: rgba(255, 141, 26, 1);
}

.accumulated-value {
  color: rgba(67, 207, 124, 1);
}

.centerTable {
  display: flex;
  flex-direction: column;
  height: 92px;
  overflow-y: auto;
  border: 1px solid rgba(163, 163, 164, 1);
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0 0 4px 4px;
}
.data-row {
  display: flex;
  border-bottom: 1px solid rgba(163, 163, 164, 0.6);
}
.data-row:last-child {
  /* border-bottom: none; */
}
.data-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  padding: 4px 6px;
  border-right: 1px solid rgba(163, 163, 164, 0.6);
  min-height: 30px;
}
.data-item:last-child {
  border-right: none;
}
.data-label {
  font-size: 12px;
  color: rgba(255, 141, 26, 1);
}
.data-value {
  font-size: 12px;
  margin-left: 10px;
  color: rgba(67, 207, 124, 1);
}
@media (max-width: 768px) {
  .monitor-container {
    width: 100%;
  }
  .data-row {
    flex-direction: column;
  }
  .data-item {
    border-right: none;
  }
  .data-item:last-child {
    border-bottom: none;
  }
}
</style>
<!-- 管路详情 -->
<style lang="scss" scoped>
.zctp {
  width: 100%;
  border-radius: 4px;
  padding: 10px;
  background: rgba(91, 109, 128, 0.04);
  .zcptall {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-content: flex-start;
  }
  .zcptall2 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-content: flex-start;
    .zcptallTitie {
      width: 100%;
      .w80 {
        width: 100px;
      }
    }
  }
  .zctp-lt {
    width: 45%;
  }
  .zctp-ct {
    width: 2px;
    height: 32px;
    opacity: 1;
    background: rgba(204, 204, 204, 1);
  }
  .zctp-rt {
    width: 45%;
  }
  .t1 {
    color: rgba(62, 70, 79, 0.6);
  }
  .t2 {
    color: rgba(62, 70, 79, 1);
  }
  .t3 {
    font-weight: 700;
  }
}
.zcct {
  margin: 15px 0;
}
.zcbt {
  .searchs {
    width: 100%;
    // height: 40px;
    border-radius: 4px;
    padding: 5px 10px 10px;
    background: rgba(91, 109, 128, 0.04);
    .el-col {
      margin: 0px 5px 0;
      height: 36px;
    }
    .search-btm {
      border-radius: 4px;
      padding: 10px;
      background-color: #dce2e8;
      .zcptall {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        // gap: 30px;
        // align-content: flex-start;
      }
      .t1 {
        color: rgba(62, 70, 79, 0.6);
      }
      .t2 {
        color: rgba(62, 70, 79, 1);
      }
    }
  }
  .liebiao {
    margin-top: 10px;
    // .liebiaoTop{

    // }
    .liebiaoBottom {
      margin-top: 10px;
    }
  }
}
</style>